<template>
	<el-row>
		<el-col :span="24">
			<el-select v-model="form.province"
					   placeholder="省"
					   @change="changePro"
					   style="margin-bottom: 10px">
				<el-option
						v-for="item in provinceData"
						:key="item.code"
						:label="item.name"
						:value="item.name">
				</el-option>
			</el-select>
		</el-col>
		<el-col :span="24">
			<el-select v-model="form.city"
					   placeholder="市"
					   @change="changeCity"
					   style="margin-bottom: 10px">
				<el-option v-for="item in cityData"
						   :key="item.code"
						   :label="item.name"
						   :value="item.name"></el-option>
			</el-select>
		</el-col>
		<el-col :span="24">
			<el-select v-model="form.town"
					   placeholder="区"
					   @change="changeArea">
				<el-option v-for="item in townData"
						   :key="item.code"
						   :label="item.name"
						   :value="item.name"></el-option>
			</el-select>
		</el-col>
	</el-row>
</template>

<script setup lang="ts" name="basetable">
import { ref, reactive, defineEmits } from 'vue';
import address from "../assets/json/address.json";


// 省份数据初始化
const provinceData = ref(address);
//  市数据
const cityData = ref([]);
// 区数据
const townData = ref([]);
// 定义派发事件
const emit = defineEmits(['selectedAddress']);

const form = reactive({
	province: "",
	city: "",
	town: "",
});

// 省份更改
const changePro = (e: any) => {
	console.log("changePro", e);
	// 从省中过滤出市的数据
	cityData.value = provinceData.value.filter((item) => {
		return item.name == e;
	})[0].children;
	// 省发生改变的时候 清空输入框市区街道的内容
	form.city = "";
	form.town = "";
	// 省发生更改时 该表空区街道数据的内容
	townData.value = [];
};
// 市更改
const changeCity = (e: any) => {
	console.log("changeCity", e);
	// 获取到区的数据
	townData.value = cityData.value.filter(
			(item) => item.name == e
	)[0].children;
	// 清空数据后面对应数组的数据
	form.town = "";
};
// 区更改
const changeArea = (e: any) => {
	let temp = townData.value.filter((item) => item.name == e);
	// // 获取到区的code码
	// this.form.regionalNumber = temp[0].code;
	// // 获取到街道的数据
	// this.jdData = this.areaData.filter((item) => item.name == e)[0].children;
	// 调用父组件的selectedAddressBook方法
	emit('selectedAddress', form);
};

// 初始化省市区数据
const initShow = async (province:string, city:string, town:string) => {
	form.province = province;
	changePro(province);
	form.city = city;
	changeCity(city);
	form.town = town;
};


// 数据清空
const clearSelected = () => {
	form.province = "";
	form.city = "";
	form.town = "";
};
defineExpose({
	initShow,
	clearSelected
})
</script>

<style scoped>
.handle-box {
	margin-bottom: 20px;
}

.handle-select {
	width: 120px;
}

.handle-input {
	width: 300px;
}
.table {
	width: 100%;
	font-size: 14px;
}
.red {
	color: #ff0000;
}
.mr10 {
	margin-right: 10px;
}
.table-td-thumb {
	display: block;
	margin: auto;
	width: 40px;
	height: 40px;
}
.el-form-item {
	font-size: 16px;
	font-weight: 700;
	color: var(--el-text-color-primary);
}

::v-deep(.el-table__header-wrapper .el-checkbox) {
	display:none
}
</style>
